<template>
  <div class="checkbox-group">
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
    >全选</el-checkbox>

    <el-checkbox-group style="margin-top: 10px;"  v-model="checked"  @change="handleCheckedChange">
      <p class="checkbox-item" v-for="(item,index) in options" :key="index">
        <el-checkbox :label="item.value">{{item.name}}</el-checkbox>
      </p>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      isIndeterminate: false,
      checkAllType: false,
      checkAll: false
    };
  },
  props: {
    options: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  watch: {},
  computed: {
    checked: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  mounted() {},
  methods: {
    handleCheckAllChange(val) {
      this.checked = val ? this.options.map(v => v.value) : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.options.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.options.length;
    }
  }
};
</script>
<style lang="scss" scoped>
.checkbox-item {
  padding: 5px 0;
  margin-left: 20px;
}
.checkbox-group{
  ::v-deep{
    .el-checkbox__label{
      font-size: 14px;
    }
  }
}
</style>
